/*
NOTE:
    load infor of each product from database and put them in variable product
*/
var product = {
    "title": "Apple iPad MD328LL/A (16GB, Wi-Fi, White) NEWEST MODE",
    "company": "Apple Inc.",
    "price": [500,658],
    "description" : "Apple iPad",
    "rating" : 4.36,
    "status" : "In stock",
    "image" :["images/products/ipad/front.jpg","images/products/ipad/back.jpg","images/products/ipad/landscape_view.jpg",
                "images/products/ipad/view_1.jpg","images/products/ipad/view_2.jpg"],// should only provide 5 images
    "seller":[{"name":"iBule","type":"new","quantity":5},
            {"name":"qualityPhoto","type":"new","quantity":2},
            {"name":"l2d2","type":"new","quantity":1},
            {"name":"the nayors","type":"new","quantity":1},
            {"name":"stoobies","type":"used","quantity":1},
            {"name":"3d Word","type":"used","quantity":3},
            {"name":"iHouse","type":"used","quantity":1},
            {"name":"blkmgc44","type":"used","quantity":1},
            {"name":"iBule","type":"refurbished","quantity":1}],
};

/*load product's images*/
function load_image(){
    $current = $('#product_img_list ul');
    $noimage = product.image.length;
    var i;
    $.each(product.image,function(index,value){
         $current.append('<li class="product_img_item"><img class="product_img_img" src="'+value+'" style="width:100%;height:100%"/> </li>');
    });       
};

/*load product's name, company and rating*/
$.fn.stars = function(){
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

function load_title(){
    $('#name').append('<h1 style="margin:0px 0px;font-size:20px">'+product.title+'</h1>');
    $('#company').append('<h2 style="margin:3px 0px;font-size:15px">by <a href="../apple.html">'+product.company+'</a></h2>');
    $('#rating').append('<p><span class="stars">'+product.rating+'</span></p>');
    $('span.stars').stars();
    
}

/*load product's price */
function load_others(){
    $('#price').append('<span class="priceLabel">Price:</span><b class="priceValue">$'+product.price[0]+' - $'+product.price[1]+'</b>');
    if(product.status == "In stock"){
        $color = "#009900";
    }else{
        $color = "#990000";
    }
    $('#status').append('<span style="color: '+$color+';font-size: 1.35em;font-weight: normal;letter-spacing: -1px;">'+product.status+'</span>');
    $new = 0; $used = 0; $refurbished = 0;
    $.each(product.seller,function(index,value){
        if(product.seller[index].type == "new"){
            $new += 1;
        }else if(product.seller[index].type =="used"){
            $used +=1;
        }else{
            $refurbished +=1;
        }
    });
    $('#new').append('<a href="">'+$new+' new</a>');
    $('#used').append('<a href="">'+$used+' used</a>');
    $('#refurbished').append('<a href="">'+$refurbished+' refurbished</a>');
}

/*set up for displaying larger current_image on hover */
function draw_upper_layer($depth){
    $('#product_desc').append('<div class="invisible"> </div>');
    $('#product_img_current').append('<img src="'+product.image[0]+'" style="width:100%;height:100%"/>');
    $('#image_enlarge').append('<img src="images/products/ipad/front.jpg" style="width: 100%" />');
    $('#image_enlarge').css('max-width',$(window).height()).css('max-height',$(window).height()); 
    $('.invisible').css('background-color','red').fadeTo(0,0).css('z-index',$depth).width($('#product_img_current').width()).height($('#product_img_current').height()).css({position: "relative",top: 0 + "px", left: 0 + "px"});
};
$(document).ready(function(){  
    load_image();
    load_title();
    load_others();
    draw_upper_layer(10);
    
    /* effects for image tab*/
    $('.product_img_item').mouseover(function(){
        $index = $(this).index('.product_img_item');
        $bg = $('.product_img_img').eq($index).attr('src');
        $('#product_img_current img').attr('src',$bg);
        $('#image_enlarge img').attr('src',$bg);
    });
    $('.invisible').mouseout(function(){
        $('#image_enlarge').addClass('popup');
    });
    $('.invisible').live("mousemove",function(e){
        $('#image_enlarge').removeClass('popup');
        $('#image_enlarge').offset({left:e.pageX,top:e.pageY});
    });   
    /*-----------------*/
 });